<template>
	<div>
		<mt-header title="错题本" style="background-color: #FA8C13;">
		</mt-header>
		<div class="content">
			<div v-for="x in data" @click="Topath(x.courseid)">
				<div class="up" :class="getClass(x.coursename)">
					<span></span>
				</div>
				<p :class="getClass(x.coursename)">{{ x.coursename }} <span>({{ x.num }})</span></p>
			</div>
		</div>
		<FooterMsg></FooterMsg>
	</div>
</template>

<script>
	import FooterMsg from '../../components/FooterMsg'
	import HeaderMsg from '../../components/Header'
	import { mapState, mapMutations } from 'vuex'
	import api from '../../api'
	import $ from 'jquery'
	export default {
		components: {
			FooterMsg,
			HeaderMsg
		},
		data() {
			return {
				data: []
			}
		},
		created() {
			var that = this;
			api.getWrongBookInfo({
				studentid: 15974,
				day: 0
			}).then(response => {
				if(response.data.ret == '1') {
					that.data = response.data.data
					console.log(that.data)
				}
			})
			$(function() {
				var h = document.body.clientHeight;
				$('.content').css('min-height', h - 44 - 49 - 32 + 'px')
			})
		},
		activated() {
			var that = this;
			api.getWrongBookInfo({
				studentid: 15974,
				day: 0
			}).then(response => {
				if(response.data.ret == '1') {
					that.data = response.data.data
					console.log(that.data)
				}
			})
			$(function() {
				var h = document.body.clientHeight;
				$('.content').css('min-height', h - 44 - 49 - 32 + 'px')
			})

		},
		computed: {
			...mapState(['userlogin'])
		},
		methods: {
			...mapMutations(['INIT_STATE']),
			Topath(_path) {
				this.$router.push({
					path: `/wrongbook/${_path}`
				})
			},
			getClass(courseName) {
				switch(courseName) {
					case '语文':
						return 'chinese';
					case '数学':
						return 'math';
					case '英语':
						return 'english';
					case '化学':
						return 'chemistry';
					case '生物':
						return 'biology';
					case '历史':
						return 'history';
					case '地理':
						return 'geography';
					case '物理':
						return 'physics';
					case '政治':
						return 'politics';
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-top: 32px;
	}
	
	.content>div {
		width: 1.5rem;
		height: 100px;
		font-size: 16px;
		margin-top: 40px;
		margin-right: 0.8rem;
		background-color: white;
		box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
	}
	
	.content>div:nth-of-type(1) {
		margin-top: 0;
	}
	
	.content>div:nth-of-type(2) {
		margin-top: 0;
	}
	
	.content>div:nth-of-type(3) {
		margin-top: 0;
	}
	
	.content>div:nth-of-type(3n-2) {
		margin-left: 0.54rem;
	}
	
	.content>div:nth-of-type(3n) {
		margin-right: 0.56rem;
	}
	
	.content>div>div {
		width: 0.88rem;
		height: 44px;
		background-size: contain;
		margin: 0 auto;
		margin-top: 13px;
		opacity: 0.8;
		border-radius: 44px;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.content>div>div>span {
		display: inline-block;
		width: 24px;
		height: 24px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		margin: 10px auto;
	}
	
	.content>div>div.chinese {
		background-image: linear-gradient(-141deg, #DFFAFF 0%, #9BEFFA 97%);
		box-shadow: 0 7px 15px 0 rgba(172, 245, 255, 0.70);
	}
	
	div.chinese>span {
		background-image: url(../../assets/images/chinese.png);
	}
	
	.content>div>div.math {
		background-image: linear-gradient(-141deg, #F2F7D9 0%, #FCE758 97%);
		box-shadow: 0 7px 15px 0 #FFECAC;
	}
	
	div.math>span {
		background-image: url(../../assets/images/math.png);
	}
	
	.content>div>div.english {
		background-image: linear-gradient(-141deg, #FAEBF0 0%, #FFB3C3 97%);
		box-shadow: 0 7px 15px 0 rgba(248, 174, 189, 0.70);
	}
	
	div.english>span {
		background-image: url(../../assets/images/english.png);
	}
	
	.content>div>div.chemistry {
		background-image: linear-gradient(-141deg, #DBFBD6 0%, #A2F697 97%, #9BEFFA 97%);
		box-shadow: 0 7px 15px 0 rgba(144, 245, 127, 0.70);
	}
	
	div.chemistry>span {
		background-image: url(../../assets/images/chemistry.png);
	}
	
	.content>div>div.biology {
		background-image: linear-gradient(-141deg, #FFEFF1 0%, #F5C7C7 97%);
		box-shadow: 0 7px 15px 0 rgba(248, 195, 190, 0.70);
	}
	
	div.biology>span {
		background-image: url(../../assets/images/biology.png);
	}
	
	.content>div>div.history {
		background-image: linear-gradient(-141deg, #E3E3FF 0%, #BEB6FF 97%);
		box-shadow: 0 7px 15px 0 rgba(191, 186, 254, 0.70);
	}
	
	div.history>span {
		background-image: url(../../assets/images/history.png);
	}
	
	.content>div>div.geography {
		background-image: linear-gradient(-141deg, #FFF4DF 0%, #FADE9B 97%);
		box-shadow: 0 7px 15px 0 rgba(255, 218, 172, 0.70);
	}
	
	div.geography>span {
		background-image: url(../../assets/images/geography.png);
	}
	
	.content>div>div.physics {
		background-image: linear-gradient(-141deg, #F8F2FC 0%, #E7B5FF 97%);
		box-shadow: 0 7px 15px 0 #EFCFFF;
	}
	
	div.physics>span {
		background-image: url(../../assets/images/physics.png);
	}
	
	.content>div>div.politics {
		background-image: linear-gradient(-141deg, #FFDFFA 0%, #FFBFEC 97%);
		box-shadow: 0 7px 15px 0 rgba(255, 172, 233, 0.70);
	}
	
	div.politics>span {
		background-image: url(../../assets/images/politics.png);
	}
	
	.content>div>p {
		margin-top: 10px;
		text-align: center;
		font-size: 16px;
	}
	
	.content>div>p>span {
		font-size: 12px;
	}
	
	p.chinese {
		color: #0CD5F9;
	}
	
	p.math {
		color: #FF9E03;
	}
	
	p.english {
		color: #FF356B;
	}
	
	p.biology {
		color: #E44100;
	}
	
	p.chemistry {
		color: #00EC00;
	}
	
	p.history {
		color: #7150F7;
	}
	
	p.geography {
		color: #F97A0C;
	}
	
	p.physics {
		color: #72138B;
	}
	
	p.politics {
		color: #F90CED;
	}
</style>